<template>
  <div>
    <!--        card组件，有边框阴影        -->
    <el-card class="box-card" style="width: 400px;margin: 0 auto;text-align: center;">
      <!--            slot插槽，放到card的头部     -->
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <!--        表单组件，inline可以设置为行内表单，具体参考element官网    -->
      <el-form inline>
        <!--        表单项组件，具体参考element官网        -->
        <el-form-item label="账号">
          <!--   v-model 双向绑定 输入信息的时候，自动修改user.account属性，反之亦然 -->
          <el-input v-model="user.account"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="密码">
          <!-- 其实这里能玩的还有很多，比如右边放个图标，点击切换是否可见之类的，希望多做点  -->
          <el-input v-model="user.password" type="password"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <!-- @click绑定点击事件，调用方法时，可以传参也可以不传参，不传参的话默认可以获取到event事件参数，可以自己看看   -->
          <el-button @click="login">登录</el-button>
          <!-- 这里的@click是简写，当只执行一行代码时，可以不创建methods内的方法，而是直接实现，$router.push('xxx')可以跳到新的url -->
          <el-button type="text" @click="$router.push('/register')">没有帐号？去注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login",
  // 这里有个需要注意的点，只要写了data()，就一定要有return { }，哪怕里面是空的
  data() {
    return {
      user: {}
    }
  },
  methods: {
    // 记住，不是写成function login()
    login() {
      // 调用全局的axios，执行post方法，因为设定了服务器地址（见main.js），所以只需要写接口地址，把整个user传参过去
      this.$axios.post('/api/user/login', this.user)
          // then表示post完成以后，这里用到了箭头函数 (res) => { }，相当于 function(res) { }，写法更简化而已
          .then((res) => {
            // res是本次请求的数据，res.data是本次请求服务器返回的数据，不熟悉的时候需要打印出来看看有哪些属性，一层一层套娃去找
            if (res.data.status === 200) {
              // this.$message是弹出element的消息提示框，.success表示成功（其实就是绿色）
              this.$message.success(res.data.message);
              this.$router.push('/index');
            } else {
              // .error表示失败（红色），同样的好像还有： .info()、 .warning()详见官网
              this.$message.error(res.data.message);
            }
          })
    }
  }
}
</script>

<style scoped>

</style>